<template>
	<div class="newPartner">
		<!-- 商家类型与返回 -->
		<div class="newPartner_type">
			<div>bannerl列表/<span>banner详情</span></div>
			<el-button @click="backList" type="success">返回</el-button>
		</div>

		<!-- 新增商家信息 -->
		<div class="newPartner_info">
			<!-- 基础信息 -->
			<div class="newPartner_needInfo">
				<div class="newPartner_info">
					<div class="newPartner_info_box">
						<form action="#" class="form">
							<ul>
								<li><span><strong style="color: red;">*</strong>名称</span><input type="text" maxlength="32" v-model="form.name"></li>
								<li><span>标题</span><input type="text" maxlength="21" v-model="form.title"></li>
								<li><span>内容</span><input type="text" maxlength="64" v-model="form.content"></li>
								<li><span>备注</span><input type="text" maxlength="21" v-model="form.desc"></li>
								<li><span>跳转链接</span><input type="text" maxlength="64" v-model="form.link"></li>
								<li><span><strong style="color: red;">*</strong>banner类型</span>
									<el-select v-model="form.type" placeholder="请选择banner类型">
										<el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id">
										</el-option>
									</el-select>
								</li>
                <li><span><strong style="color: red;">*</strong>卖场</span>
                  <el-select
                    v-model="form.market_id"
                    clearable
                    @change="selectMarket"
                    filterable
                    :disabled="form.id"
                    placeholder="请选择卖场"
                  >
                    <el-option
                      v-for="item in marketList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
								</li>
								<li><span><strong style="color: red;">*</strong>优先级</span><input type="text" maxlength="64" v-model="form.sort"></li>
							</ul>
						</form>
					</div>
					<div class="license">
						<span style="width: 112px;text-align: right;">banner图</span>
						<div class="cardImg_positive">
							<div v-if="thisimg==''" class="imgWrap">
								<input type="file" accept="image/png, image/jpeg, image/gif, image/jpg" @change="toUpload" />
								<div class="upTit">
									<i class="el-icon-plus"></i>
									banner图
								</div>
							</div>
							<div v-else class="imgWrap">
								<img :src="thisimg" alt="" @load="loadImg()" id="imgTag">
								<div class="shadowImg">
									<i @click="delImg()" class="el-icon-delete"></i>
								</div>
							</div>
						</div>
					</div>
				</div>




				<!-- 提交按钮 -->
				<div class="submitBtn">
					<button @click="toAddBanner">提交</button>
				</div>
			</div>

		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				navStatus: false, //点击基础信息或附件上传
				roomStatus: 1, //店铺上下架状态
				shopRoombrief: '', //店铺简介
				form: {
					'name': '',
					'title': '',
					'sort': 50,
					'link': '',
					'desc': '',
					'content': '',
					'img_id': null,
					'type': null,
          'market_id':''
				},
				typeList: [],
				thisimg: '',
        marketList: [],
			};
		},
		mounted() {
			let id = this.$route.query.id;
			if (id) {
				this.getBannerDetail(id)
			}
			this.getTypeList();
      this.remoteMethod();
		},

		methods: {
      // 获取卖场列表
      remoteMethod() {
        this.$http.post("/api/root/Market/marketList").then((res) => {
          console.log(res, "卖场列表");
          if (res.code == 1) {
            this.marketList = res.data ? res.data : [];
          }
        });
      },
      // 选择卖场
      selectMarket() {

      },
			//获取详情
			getBannerDetail(id) {
				console.log(id);
				this.$http.post('/api/root/Banner/info', {
					banner_id: id
				}).then(res => {
					console.log(res);
					if (res.code == 1) {
						this.form = res.data ? res.data : {};
						this.thisimg = this.form.img;
						console.log(this.thisimg);
					}
				}).catch(err => {
					this.$message({
						type: "error",
						message: err
					});
				});
			},

			getTypeList() {
				this.$http.post('/api/root/Banner/typeList', {
					page: 1,
					pagesize: 100
				}).then(res => {
					console.log(res, 'typelist');
					if (res.code == 1) {
						let baselist = [{
							id: 0,
							name: '获取类型列表失败'
						}]
						this.typeList = res.data.list ? res.data.list : baselist;
					}
				}).catch(err => {
					this.$message({
						type: "error",
						message: err
					});
				});
			},

			//banner图
			toUpload(event) {
				let file = event.target.files[0];
				let form = new FormData();
				let newFile = null;

				form.append("file", file);
				this.$http.post("/api/client/base/uploadfile", form)
					.then(res => {
						console.log(res);
						if (res.code == 1) {
							this.thisimg = res.data.url;
							this.form.img_id = res.data.id;
							this.$message({
								type: "success",
								message: "上传成功"
							});
						}
					})
					.catch(err => {
						this.$message({
							showClose: true,
							message: "上传失败",
							type: "error"
						});
					});
			},

			//点击删除营业执照
			delImg() {
				this.form.img_id = "";
				this.thisimg = "";
			},

			// 点击返回到列表
			backList() {
				this.$router.back(1)
			},
			loadImg() {
				let imgtag = document.getElementById('imgTag');
				let width = imgtag.width;
				let height = imgtag.height;
				let boxHeight = 250;
				if (height >= boxHeight) {
					imgtag.width = boxHeight * width / height;
					imgtag.height = boxHeight;
				}

			},

			// 点击提交按钮
			toAddBanner() {
				console.log(this.form);
				if (!this.form.img_id) {
					this.$message({
						type: "error",
						message: 'banner图不能为空'
					});
				}
				if (!this.form.name) {
					this.$message({
						type: "error",
						message: '名称不能为空'
					});
				}
				if (!this.form.type) {
					this.$message({
						type: "error",
						message: 'banner类型不能为空'
					});
				}
				if (!this.form.sort) {
					this.$message({
						type: "error",
						message: '优先级不能为空'
					});
				}
				if (this.form.id) {
					this.form.banner_id = this.form.id;
					this.$http.post("/api/root/banner/edit", this.form).then(res => {
						if (res.code == 1) {
							this.$router.push({
								name: "bannerList",
								params: {}
							});
							this.$message({
								type: "success",
								message: "添加成功"
							});
						} else {
							this.$message({
								type: "error",
								message: res.msg
							});
						}
					}).catch(err => {
						this.$message({
							type: "error",
							message: err
						});
					});
				} else {
					this.$http.post("/api/root/banner/add", this.form).then(res => {
						if (res.code == 1) {
							this.$router.push({
								name: "bannerList",
								params: {}
							});
							this.$message({
								type: "success",
								message: "添加成功"
							});
						} else {
							this.$message({
								type: "error",
								message: res.msg
							});
						}
					}).catch(err => {
						this.$message({
							type: "error",
							message: err
						});
					});
				}

			}

		}
	};
</script>

<style lang="less" scoped>
	@import "bannerDetail.less";
</style>
